.speech-button {
    display: block;
    margin: 0 auto;
}

.speech-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 0.875rem;
    justify-content: center; /* 添加垂直居中 */
    text-align: center; /* 添加水平居中 */
    height: 100vh; /* 使其占据整个视口高度 */
}

.highlight {
    color: #c00000;
}

.turn1 textarea {
    width: 47.5rem;
    height: 11.25rem;
    border: 0.1875rem solid #c00000;
    font-size: 1.25rem;
    color: #2f2f3a;
}

.ok-button {
    margin-top: 1.875rem;
    text-align: center;
}

.ok-button a {
    background-color: #B30000;
    padding: 0.625rem 1.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s; /* 添加过渡效果 */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.125rem;
}

.ok-button a:hover {
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    border-radius: 0.375rem;
    background-color: #C20000; /* 鼠标悬停时的颜色 */
}

.button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0.625rem;
}

.custom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    margin: 0 0.3125rem;
    background-color: #B30000;
    color: white;
    font-size: 1.0625rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.custom-button:hover {
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    border-radius: 0.375rem; /* Converted: 6px */
    background-color: #C20000; /* 鼠标悬停时的颜色 */
}

.button-image {
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.375rem;
}

.custom-button2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background-color: #353540;
    border: none;
    border-radius: 3.125rem;
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.custom-button2:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    border-radius: 3.125rem;
}

.intro {
    font-weight: inherit;
    color: #fff;
    font-size: 0.875rem;
    max-width: 50rem;
    margin: 0px;
}

.chat-container {
    width: 62%;
    height: 32%;
    margin: 0.625rem auto;
    padding: 0.625rem;
    background-color: #ece9e9;
    overflow-y: auto;
    max-height: 20rem;
    border: 0.1875rem solid #c00000;
}

.doctor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
}

.patient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
}

.patient-message {
    color: #353540;
    display: flex;
    float: right;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row-reverse;
    margin-bottom: 1.25rem;
}

.doctor-message .message-textarea {
    max-width: 63%;
    background-color: #74B0CA;
    overflow: auto;
    padding: 5px 10px;
    border-radius: 10px;
    text-align: left;
}

.patient-message .message-textarea {
    max-width: 63%;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 10px;
    overflow: auto;
    text-align: left;
}

/* 医生和患者消息气泡样式 */
.doctor-message, .patient-message {
    clear: both; /* 清除浮动 */
    display: flex; /* 设置为flex容器 */
    align-items: center; /* 使内容垂直居中 */
    margin-bottom: 1.25rem; /* 设置底部边距为1.25rem */
}

.top {
    margin-top: 1.875rem;
    font-weight: bold;
    font-size: 1.375rem;
    text-decoration: underline;
    cursor: pointer;
    outline: none;
}
